<template>
	<view class="centent">
		<view class="search">
			<u-search :show-action="true" v-model="keyword" shape="square" actionText="搜索" height="45" :animation="true"
				@custom="custom"></u-search>
		</view>
		<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/571713140217rI9Ui2.png" mode=""></image>
		<view class="contract_item">
			<view class="contract_title">合同模板</view>
		</view>
		<view class="tab_item">
			 <u-tabs :list="industryTabs" @click="Tabclick"></u-tabs>
		</view>
		<view class="goods--box">
			<view class="goods--item" v-for="(item , index) in DataList" :key="index" @click="Tourl('/contract/detail/index?id=' + item.id)">
				<view class="item--cover" :style="{backgroundImage: 'url(' + item.goods_image + ')'}" />
				<view class="item--content">
					<view class="title u-line-1">{{item.name}}</view>
					<view class="price"><text>¥</text>{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				DataList: [],
				scrollTop: 0,
				tabIndex: '',
				keyword: "",
				projectList: [],
				industryTabs: [
					{
						name: '全部',
						id : 0
					}
				],
				industryTabIndex: 0,
			}
		},
		onLoad(opt) {
			this.timeer()
			this.getCates()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			Tabclick(e){
				console.log(e)
				this.DataList = [];
				this.industryTabIndex = e.id
				this.timeer()
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('contract/lists', {
						'page': page,
						'limit': this.limit,
						'nav' : this.industryTabIndex,
						'keyword' : this.keyword
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);
							
							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			async getCates() {
				try {
					const res = await $H.post('contract/getCate', {
					}, {
						token: true
					});
					var nav = res.nav;
					for (let i = 0; i < nav.length; i++) {
						//将数据逐条写入数组
						this.industryTabs.push(nav[i]);
					}
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			custom(value) {
				this.keyword = value
				this.timeer()
			},
		}
	}
</script>

<style>
	page{
		background: #fff;
		font-family: "SemiBold";
	}
</style>
<style lang="scss" scoped>
	
	.search {
		padding: 10px;
		background-color: rgb(246 250 254);
	}
	
	.centent image{
		height: 160px;
		width: 100%;
	}
	
	.contract_item{
		margin: 10px;
		display: flex;
		.contract_title{
			font-size: 16px;
			font-weight: bold;
		}
	}

	.tab_item{
		margin-left: 10px;
	}



	.ellipsis-1 {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ellipsis-2 {
		max-width: 100%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods--box {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;

		.goods--item {
			background: white;
			width: calc(50% - 20rpx);
			background: white;
			
			overflow: hidden;
			margin: 10rpx;

			.item--cover {
				width: 100%;
				height: 240px;
				padding-top: 100%;
				background-position: center;
				background-size: cover;
				border: 1px #f2f2f2 solid;
				border-radius: 20rpx;
			}

			.item--content {
				padding: 20rpx;

				&>.title {
					font-size: 16px;
					line-height: 20px;
					height: 20px;
					font-weight: 700;
					color: #333;
				}

				&>.price {
					padding-top: 15rpx;
					line-height: 40rpx;
					font-weight: 600;
					color: #d4282d;
					font-size:22px;
					@extend .ellipsis-1;
					text {
						margin-right: 15rpx;
						font-size: 80%;
					}
				}
			}
		}
	}
</style>